<*****综合演练*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
		<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :nodownloadReports="1">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--插槽--页面主题部分-->
				<div :style="{height:getContentHeight()+'px'}" style="display:flex;flex-direction:column;">
					<div id="scoreAnalysis" class="chart" style="height:100%;width:100%"></div>
				</div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="'page'+index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--插槽--页面主题部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">排行总榜</h4>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable "></Table>
				</div>
			</page>
			<page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in drillPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">演练数据</h4>
					<Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
            <page class="page4" :style="pageMargin"  :title="reportInfo.name" v-if="remarkList.length!=0"
				:configAddress="configAddress" :configInstruction="configInstruction">
				<div v-for="(item, index) in remarkList" :key="item.teamName" class="remark-group">
					<p class="user-name">团队名：{{ item.teamName }}</p>
					<div>
						评价：<span class="remark-html" v-html="item.remark"></span>
					</div>
					<p class="subsection" v-if="index !== (remarkList.length - 1)"></p>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
import HighCharts from 'highcharts'
import highchartsMore from 'highcharts/highcharts-more';
import * as SeriesLabel from 'highcharts/modules/series-label';
import mixin from "@/components/report/mixinFun.js"
import encryption from "@/libs/encryption.js";
//接口
import {getArchiveDeatil} from '@/api/experimenterTrack'
//组件
import reportHeader from "@/components/report/reportHeader.vue"
import cover from "@/components/report/cover.vue"
import page from "@/components/report/page.vue"
export default {
	name: 'examReport',
	components:{page,cover,reportHeader},
	mixins: [mixin],
	data() {
		return {
			reportCol: [{
				key: 'rank',
				title: '排名',
				width: 100,
				per: 0.25
			}, {
				key: 'teamName',
				title: '团队名称',
				per: 0.25
			}, {
				key: 'attackScore',
				title: '总分',
				per: 0.25
			}, {
				key: 'finishCount',
				title: '攻击到的靶标',
				per: 0.25
			}, ],
			reportInfo: {},
			sceneId: this.$route.query.id,
			scale: 1,
			fontSize: 14,
			disSub: false,
			rankList: [],
			rankListPageNumArr: [],
			disDownloadReport: true,
			drillTableList:[],
			drillPageNumArr:[],
			drillCol:[],
            remarkList:[]
		}
	},
	watch: {

	},
	filters: {

	},
	computed: {
		coverData:function(){
			let {name,startTime,endTime,creatorName,teamCount,userCount} = this.reportInfo;
			return [
				{value:startTime,title:'开始时间'},
				{value:endTime,title:'结束时间'},
				{value:creatorName,title:'创建者'},
				{value:teamCount + '个',title:'参赛团队'},
				{value:userCount + '人',title:'参赛人数'},
			]
		},
	},
	mounted() {
		this.setStyle();
		this.getArchiveDeatil();
		window.onresize = () => {
			this.disDownloadReport = true;
			this.setStyle();
		}
	},
	beforeDestroy() {

	},
	methods: {
		getArchiveDeatil(){
            getArchiveDeatil(this.$route.query.id).then(res=>{
                if(res.code==1){
                    let content=res.data.content
                    content=JSON.parse(content)
                    this.reportInfo=content.reportInfo
                    this.rankListPageNumArr=content.rankListPageNumArr
                    this.drillPageNumArr=content.drillPageNumArr
                    if(content.remarkList){
                        this.remarkList=content.remarkList
                    }
                    this.generateReport()
                    this.initCol()
                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
		setStyle() {
			let width = (window.innerHtml || document.documentElement.clientWidth);
			this.fontSize = width / 1519 * 14;
			if(this.fontSize < 10) {
				this.fontSize = 10;
			}
			this.setPageMargin();
			this.getRankPage();
		},
		getTablePage() {
				this.initCol();
				if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
			},
        initCol() {
            this.drillCol = [
                {
                type: 'index',
                width: 30,
                title: '排名',
                align: 'center'
            },{
                key: 'teamName',
                title: '团队名称',
                width: 40
            }, {
                key: 'spendTime',
                title: '演练时长',
                per: 0.15
            }, {
                key: 'missionNum',
                title: '演练总任务数',
                width: 0.1
            }, {
                key: 'teamAttackNum',
                title: '团队攻击总数',
                width: 0.15
            },{
                key: 'teamFinishMissionNum',
                title: '团队有效攻击次数',
                per: 0.15
            }, {
                key: 'rightAttackPercent',
                title: '有效攻击指数',
                per: 0.15
            }, {
                key: 'attackPercent',
                title: '攻击指数',
                per: 0.15
            },{
                key: 'threatPercent',
                title: '威胁指数',
                per: 0.2			}];
        },
		initReportCol() {
			this.reportCol = [{
				key: 'rank',
				title: '排名',
				per: 0.25
			}, {
				key: 'teamName',
				title: '团队名称',
				per: 0.25
			}, {
				key: 'attackScore',
				title: '总分',
				per: 0.25
			}, {
				key: 'finishCount',
				title: '攻击到的靶标',
				per: 0.25
			}, ]
		},
		getRankPage() {
			this.initReportCol();
			if(this.rankList.length > 0) {
				this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
			}
			this.$nextTick(() => {
				this.disDownloadReport = false;
			});
		},
		//生成报告
		generateReport() {
					this.getRankPage();
					this.$nextTick(() => {
						this.drawChart();
					});
		},
		drawChart() {
			let _this = this;
			let users = [];
			let categorys = [];
			let indicatorData = [];
			for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
				let para = {};
				para.name = _this.reportInfo.categoryVOs[i].category;
				para.max = 100;
				indicatorData.push(para);
			}
			_this.reportInfo.rankList.forEach(user => {
				let usersData = {};
				usersData.name = user.teamName;
				usersData.data = user.keVOList.map(item => item.qscore);
				usersData.pointPlacement = 'on';
				users.push(usersData);
			})
			let qfinishs = [];
			let qcounts = [];
			for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
				qfinishs.push(0);
				qcounts.push(0);
			}
			_this.reportInfo.categoryVOs.forEach(category => {
				categorys.push(category.category);
			});
			_this.reportInfo.categoryVOs.forEach(category => {
				for(let i = 0; i < _this.reportInfo.categoryVOs.length; i++) {
					if(category.category == _this.reportInfo.categoryVOs[i].category) {
						qfinishs[i] = category.qfinish;
						qcounts[i] = category.qcount;
						indicatorData[i].max = category.grade;
					}
				}
			})
			console.log(indicatorData, users)
				//      let knowledgePointsAnalysis = echarts.init(document.getElementById('knowledgePointsAnalysis'));
			let knowledgePointsOption = {
				chart: {
					polar: true,
					type: 'line',
					backgroundColor: 'transparent',
				},
				title: {
					text: '知识点掌握情况',
					align: 'left',
					//			x:10,
					y: this.fontSize * 0.8,
					style: {
						fontSize: this.fontSize * 0.8 + 'px',
						fontWeight: 'bold',
						//		            color: 'red'   //这边是改标题的字体大小和颜色
					}
				},
				tooltip: {},
				legend: {
					enabled: false,
				},
				pane: {
					size: '80%'
				},
				xAxis: {
					categories: this.reportInfo.categoryVOs.map(item => item.category),
					tickmarkPlacement: 'on',
					lineWidth: 0,
					labels: {
						style: {
							fontSize: this.fontSize * 0.6
						},
					},
				},
				yAxis: {
					gridLineInterpolation: 'polygon',
					lineWidth: 0,
					min: 0
				},
				series: users,
				credits: {
					enabled: false
				}, //去掉地址
				exporting: {
					enabled: false
				}, //隐藏导出图片
			};
			//      highchartsMore(HighCharts);
			//      HighCharts.chart('knowledgePointsAnalysis',knowledgePointsOption);
			//      knowledgePointsAnalysis.setOption(knowledgePointsOption);
			//      let questionTypeAnalysis = echarts.init(document.getElementById('questionTypeAnalysis'));
			let questionTypeOption = {
				chart: {
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false,
					polar: true,
					type: 'line',
					backgroundColor: 'transparent',
				},
				title: {
					text: '题目分布及解题率分析',
					align: 'left',
					//			x:10,
					y: this.fontSize * 0.8,
					style: {
						fontSize: this.fontSize * 0.8 + 'px',
						fontWeight: 'bold',
						//		            color: 'red'   //这边是改标题的字体大小和颜色
					}
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {
					data: ['题目数', '解题数'],
					x: 'left',
					y: 'top',
					padding: [60, 0, 0, 10],
					textStyle: {
						color: '#888'
					},
					itemStyle: {
						'fontSize': '18px'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					top: '20%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01],
					splitLine: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#888'
						}
					}
				},
				xAxis: {
					categories: categorys,
					title: {
						text: null
					}
				},
				yAxis: {
					type: 'category',
					data: categorys,
					axisTick: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: '#888'
						}
					}
				},
				series: [{
					name: '题目数',
					type: 'bar',
					data: qcounts,
					barMaxWidth: 20,
					itemStyle: {
						normal: {
							//			                    color:'#2f70ff',
							barBorderRadius: [18, 18, 18, 18]
						}
					},
				}, {
					name: '解题数',
					type: 'bar',
					data: qfinishs,
					barMaxWidth: 20,
					itemStyle: {
						normal: {
							//			                    color:'#ffba4f',
							barBorderRadius: [18, 18, 18, 18]
						}
					},
				}]
			};
			if(_this.reportInfo.rankList.length <= 0) {
				return
			}
			let scoreOptione = {
				chart: {
					backgroundColor: 'transparent',
				},
				title: {
					text: '得分趋势统计',
					align: 'left',
					y: this.fontSize * 0.8,
					style: {
						fontSize: this.fontSize * 0.8 + 'px',
						fontWeight: 'bold',
						//		            color: 'red'   //这边是改标题的字体大小和颜色
					}
				},
				legend: {
					//        	floating: true,
					align: 'left',
					verticalAlign: 'top',
					itemStyle: {
						fontSize: this.fontSize * 0.6 + 'px',
						fontWeight: 'normal',
						//		            color: 'red'   //这边是改标题的字体大小和颜色
					}
				},
				xAxis: {
					categories: _this.reportInfo.rankList[0].scoreVO.map(score => score.scoreDate.split(" ")[1]),
					labels: {
						style: {
							fontSize: this.fontSize * 0.6
						},
					},
				},
				plotOptions: {
					series: {
						label: {
							//connectorAllowed: false
						}
					}
				},
				yAxis: {
					title: {
						text: '得分'
					},
				},
				series: _this.reportInfo.rankList.map(user => {
					return {
						name: user.teamName,
						//type:'line',
						data: user.scoreVO.map(score => score.score)
					}
				}),
				credits: {
					enabled: false
				}, //去掉地址
				exporting: {
					enabled: false
				}, //隐藏导出图片
				responsive: {
					rules: [{
						condition: {
							maxWidth: 500
						},
						chartOptions: {
							legend: {
								layout: 'horizontal',
								align: 'left',
								verticalAlign: 'top'
							}
						}
					}]
				}
			};
			SeriesLabel(HighCharts);
			HighCharts.chart('scoreAnalysis', scoreOptione);
		},
		zoomIn() {
			if(this.scale == 0.5) {
				return
			}
			this.disDownloadReport = true;
			this.scale = this.accSub(this.scale, 0.1);
			if(this.scale != 0) {
				this.fontSize = this.fontSize - 0.5;
			}
			this.drawChart();
			this.setPageMargin();
			this.getRankPage();
		},
		zoomOut() {
			if(this.scale == 3) {
				return
			}
			this.disDownloadReport = true;
			this.scale = this.accAdd(this.scale, 0.1);
			if(this.scale != 0) {
				this.fontSize = this.fontSize + 0.5;
			}
			this.drawChart();
			this.setPageMargin();
			this.getRankPage();
		}
	},
	destroyed() {

	}
}
</script>

<style scoped>
#compReport {
	/*padding: 40px 60px;*/
	background: #f1f4fd;
}

.reportContent {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 80px;
}

.page2 .chart {
	height: 96%;
	width: 98%;
	border: 1px solid #bbbdbc;
	border-radius: 5px;
}

::-webkit-scrollbar {
	width: 5px;
	/*滚动条宽度*/
	height: 5px;
	/*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
	border-radius: 2.5px;
	/*滚动条的背景区域的圆角*/
	background-color: #e6e6e6;
	/*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
	border-radius: 2.5px;
	/*滚动条的圆角*/
	background-color: #aaa;
	/*滚动条的背景颜色*/
}

/deep/.rankTable .ivu-table {
	font-size: 1em;
	border: none;
	border: 1px solid #bcbcbc;
}

/deep/.rankTable .ivu-table,
/deep/.rankTable .ivu-table th,
/deep/.rankTable .ivu-table td {
	background: transparent!important;
}

/deep/.rankTable thead tr th {
	border-bottom: 1px solid #ccc;
	height: auto;
}

/deep/ .rankTable tbody tr td {
	border-color: #ccc;
	height: auto;
}

/deep/.rankTable .ivu-table-cell {
	/*line-height:1.2;*/
	padding-left: .3em;
	padding-right: .3em;
}

/deep/.rankTable .ivu-table-cell span {
	display: flex;
	font-size: 0.6em;
}

/deep/.rankTable .ivu-table:before,
/deep/.rankTable .ivu-table:after {
	background-color: transparent;
}
</style>
<style>
.rankTable .ivu-table-overflowX {
	overflow: hidden;
}
</style>